I used bootstrap. Here is my code , I want when mouseover an img or a element to make animation work also when mouseleave animation stop.
.progress-bar {
animation: pr 2s infinite;
}
@keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>Here's the code UPDATED
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}
.hover-box .progress .progress-bar {
height: 20px;
width: 100%;
}
.hover-box .content:hover + .progress .progress-bar {
background: red;
animation: pr 2s infinite;
}
</style>
</head>
<body>
<div class="hover-box">
<div class="content">
<a href="#!">Hover me</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>Your progress-bar requires an height to be seen.
example:
/* do you need the progressbar to be as wide as the picture box ?*/
/* if yes, uncomment below selector & rule */
/* .choosebybrand {
display:inline-block;
}*/
.choosebybrand:hover ~ .progress .progress-bar {
animation: pr 2s infinite;
height: 1em;
}
@keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="https://dummyimage.com/150x100&text=samsung" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>You can't do exactly as required in the question using just CSS as the anchor and img elements are neither parents of the progress bar nor are they siblings. CSS does not allow going 'up' and then down again.
What you can do is sense the hover on an ancestor element of the anchor and img elements which also is a sibling of the progress element and get the animation going on the progress bar then.
.samsung {
display: inline-block;
}
.samsung:hover~.progress .progress-bar {
animation: pr 2s infinite;
}
.progress {
width: 100vw;
}
.progress-bar {
height: 2px;
width: 100vw;
background-color: magenta; /* added so something is seen when no hover */
}
@keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>Note: the snippet had to add height dimension so the progress bar could be seen.